<template>
  <div class="">
    <Title :name="'智能设备概况'">
      <el-row class="content">
        <el-col
          v-hasPermi="['device_manage:device:list']"
          :span="4"
          class="content-line"
        >
          <div
            :class="[
              'content-total',
              choseTab == -1 ? 'content-total-chose' : '',
            ]"
            @click="handleChangetab(-1)"
          >
            <img src="@/assets/images/maintenance/total.png" alt="" />
            <span>计量设备总数</span>
            <span>{{ allTotal }}</span>
          </div>
        </el-col>
        <el-col :span="20" class="content-line">
          <div
            v-for="(item, index) in tabArr"
            :key="index"
            :class="['line-item', choseTab == index ? 'chose-item' : '']"
            @click="handleChangetab(index)"
            v-hasPermi="[item.hasPermiValue]"
          >
            <img :src="item.img" alt="" />
            <span class="name">{{ item.name }}</span>
            <div class="item-bg">
              <span>{{ item.tabtotalName }}</span>
              <span class="total">{{ item.total }}</span>
            </div>
            <div class="item-bg">
              <span>异常</span>
              <span class="abnormal">{{ item.abnormal }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </Title>
    <!-- 设备总数 -->
    <Title
      v-loading="loading"
      v-show="choseTab == -1"
      :name="'设备回路'"
      style="margin-top: 20px"
    >
      <!-- :appendFlag="'1'" -->
      <!-- @handleGomore="handleGomore" -->
      <deviceLoopback
        :choseTab="choseTab"
        ref="deviceLoopback"
      ></deviceLoopback>
    </Title>

    <!-- 智能插座 -->
    <situationC
      v-loading="loading"
      v-show="choseTab == 0"
      style="margin-top: 20px"
    >
      <div slot="sumNum">
        <miniTab
          v-if="choseTab == 0"
          :minitabArr="[
            {
              label: pieData1.title,
              value: '0',
            },
            {
              label: '设备回路',
              value: '1',
            },
          ]"
          @minitabChange="minitabChange"
        ></miniTab>
      </div>
      <div slot="cardContent">
        <div v-if="minichoseTab == '0'" class="sumNum sumNum1">
          {{ pieData1.total }}
        </div>
        <el-row v-if="minichoseTab == '0'" :gutter="colparams.gutter">
          <el-col :span="colparams.piecol">
            <pieChart
              v-if="choseTab == 0"
              ref="pieData1"
              :pieData="pieData1"
            ></pieChart>
          </el-col>
          <el-col class="table-area" :span="colparams.tablecol">
            <lb-table
              ref="zncztable"
              :column="tableData1.column"
              :data="tableData1.data"
              background
              border
              :height="labtableHeight"
              layout="total, sizes, prev, pager, next, jumper"
              pagination
              :page-sizes="[10, 20, 30, 40]"
              :pager-count="5"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              @size-change="handleSizeChange"
              @p-current-change="handleCurrentChange"
              :total="total"
            >
            </lb-table>
          </el-col>
        </el-row>
        <div v-if="minichoseTab == '1'">
          <deviceLoopback
            :choseTab="choseTab"
            ref="deviceLoopback0"
          ></deviceLoopback>
        </div>
      </div>
    </situationC>
    <!-- 单相电表 -->
    <situationC
      v-loading="loading"
      v-show="choseTab == 1"
      style="margin-top: 20px"
    >
      <div slot="sumNum">
        <miniTab
          v-if="choseTab == 1"
          :minitabArr="[
            {
              label: pieData2.title,
              value: '0',
            },
            {
              label: '设备回路',
              value: '1',
            },
          ]"
          @minitabChange="minitabChange"
        ></miniTab>
      </div>
      <div slot="cardContent">
        <div v-if="minichoseTab == '0'" class="sumNum sumNum1">
          {{ pieData2.total }}
        </div>
        <el-row v-if="minichoseTab == '0'" :gutter="colparams.gutter">
          <el-col :span="colparams.piecol">
            <pieChart
              v-if="choseTab == 1"
              ref="pieData2"
              :pieData="pieData2"
            ></pieChart>
          </el-col>
          <el-col class="table-area" :span="colparams.tablecol">
            <!-- :max-height="maxHeight" -->
            <lb-table
              ref="zncztable"
              :column="tableData2.column"
              :data="tableData2.data"
              background
              border
              :height="labtableHeight"
              layout="total, sizes, prev, pager, next, jumper"
              pagination
              :page-sizes="[10, 20, 30, 40]"
              :pager-count="5"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              @size-change="handleSizeChange"
              @p-current-change="handleCurrentChange"
              :total="total"
            >
            </lb-table>
          </el-col>
        </el-row>
        <div v-if="minichoseTab == '1'">
          <deviceLoopback
            :choseTab="choseTab"
            ref="deviceLoopback1"
          ></deviceLoopback>
        </div>
      </div>
    </situationC>
    <!-- 三项电表 -->
    <situationC
      v-loading="loading"
      v-show="choseTab == 2"
      style="margin-top: 20px"
    >
      <div slot="sumNum">
        <miniTab
          v-if="choseTab == 2"
          :minitabArr="[
            {
              label: pieData3.title,
              value: '0',
            },
            {
              label: '设备回路',
              value: '1',
            },
          ]"
          @minitabChange="minitabChange"
        ></miniTab>
      </div>
      <div slot="cardContent">
        <div v-if="minichoseTab == '0'" class="sumNum sumNum1">
          {{ pieData3.total }}
        </div>
        <el-row v-if="minichoseTab == '0'" :gutter="colparams.gutter">
          <el-col :span="colparams.piecol">
            <pieChart
              v-if="choseTab == 2"
              ref="pieData3"
              :pieData="pieData3"
            ></pieChart>
          </el-col>
          <el-col class="table-area" :span="colparams.tablecol">
            <!-- :max-height="maxHeight" -->
            <lb-table
              ref="sxdbtable"
              :column="tableData3.column"
              :data="tableData3.data"
              background
              border
              :height="labtableHeight"
              layout="total, sizes, prev, pager, next, jumper"
              pagination
              :page-sizes="[10, 20, 30, 40]"
              :pager-count="5"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              @size-change="handleSizeChange"
              @p-current-change="handleCurrentChange"
              :total="total"
            >
            </lb-table>
          </el-col>
        </el-row>
        <div v-if="minichoseTab == '1'">
          <deviceLoopback
            :choseTab="choseTab"
            ref="deviceLoopback2"
          ></deviceLoopback>
        </div>
      </div>
    </situationC>
    <!-- 组合电表 -->
    <situationC
      v-loading="loading"
      v-show="choseTab == 3"
      style="margin-top: 20px"
    >
      <div slot="sumNum">
        <miniTab
          v-if="choseTab == 3"
          :minitabArr="[
            {
              label: pieData4.title,
              value: '0',
            },
            {
              label: '设备回路',
              value: '1',
            },
          ]"
          @minitabChange="minitabChange"
        ></miniTab>
      </div>
      <div slot="cardContent">
        <div v-if="minichoseTab == '0'" class="sumNum sumNum1">
          {{ pieData4.total }}
        </div>
        <el-row v-if="minichoseTab == '0'" :gutter="colparams.gutter">
          <el-col :span="colparams.piecol">
            <pieChart
              v-if="choseTab == 3"
              ref="pieData4"
              :pieData="pieData4"
            ></pieChart>
          </el-col>
          <el-col class="table-area" :span="colparams.tablecol">
            <!-- :max-height="maxHeight" -->
            <lb-table
              ref="zhdbtable"
              :column="tableData4.column"
              :data="tableData4.data"
              background
              border
              :height="labtableHeight"
              layout="total, sizes, prev, pager, next, jumper"
              pagination
              :page-sizes="[10, 20, 30, 40]"
              :pager-count="5"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              @size-change="handleSizeChange"
              @p-current-change="handleCurrentChange"
              :total="total"
            >
            </lb-table>
          </el-col>
        </el-row>
        <div v-if="minichoseTab == '1'">
          <deviceLoopback
            :choseTab="choseTab"
            ref="deviceLoopback3"
          ></deviceLoopback>
        </div>
      </div>
    </situationC>
    <!-- 智能水表 -->
    <situationC
      v-loading="loading"
      v-show="choseTab == 4"
      style="margin-top: 20px"
    >
      <div slot="sumNum">
        <miniTab
          v-if="choseTab == 4"
          :minitabArr="[
            {
              label: pieData5.title,
              value: '0',
            },
            {
              label: '设备回路',
              value: '1',
            },
          ]"
          @minitabChange="minitabChange"
        ></miniTab>
      </div>
      <div slot="cardContent">
        <div v-if="minichoseTab == '0'" class="sumNum sumNum1">
          {{ pieData5.total }}
        </div>
        <el-row v-if="minichoseTab == '0'" :gutter="colparams.gutter">
          <el-col :span="colparams.piecol">
            <pieChart
              v-if="choseTab == 4"
              ref="pieData5"
              :pieData="pieData5"
            ></pieChart>
          </el-col>
          <el-col class="table-area" :span="colparams.tablecol">
            <!-- :max-height="maxHeight" -->
            <lb-table
              ref="znsbtable"
              :column="tableData5.column"
              :data="tableData5.data"
              background
              border
              :height="labtableHeight"
              layout="total, sizes, prev, pager, next, jumper"
              pagination
              :page-sizes="[10, 20, 30, 40]"
              :pager-count="5"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              @size-change="handleSizeChange"
              @p-current-change="handleCurrentChange"
              :total="total"
            >
            </lb-table>
          </el-col>
        </el-row>
        <div v-if="minichoseTab == '1'">
          <deviceLoopback
            :choseTab="choseTab"
            ref="deviceLoopback4"
          ></deviceLoopback>
        </div>
      </div>
    </situationC>
  </div>
</template>

<script>
import {
  getDeviceMsg,
  getSocketList,
  getThreepphaseList,
  getCombinationList,
  getWmeterList,
  getSinglephaseList,
} from "@/api/iot/maintenance.js";
import situationC from "@/views/maintenance/operation/maintenance/components/measureC/generalSituation.vue";
import pieChart from "@/views/maintenance/operation/maintenance/components/measureC/pieChart.vue";
import miniTab from "@/views/maintenance/operation/maintenance/components/measureC/miniChosetab.vue";
import deviceLoopback from "@/views/maintenance/operation/maintenance/components/measureC/deviceLoopback.vue";
import auth from "@/plugins/auth";
export default {
  components: {
    situationC,
    pieChart,
    miniTab,
    deviceLoopback,
  },
  dicts: [
    "device_model", // 设备型号（电表）
    "wmeter_device_model", // 水表型号
  ],
  data() {
    return {
      labtableHeight: 410,
      maxHeight: 300,
      colparams: {
        piecol: 5,
        tablecol: 19,
        gutter: 10,
      },
      choseTab: -1, // 选择的tab
      minichoseTab: "0",
      Totaldata: {}, // 统计数据对象（包括图表数据）
      allTotal: 0, // 计量设备总数
      tabArr: [
        {
          name: "智能插座",
          img: require("@/assets/images/maintenance/tip1.png"),
          total: 0, // 总数
          abnormal: 0, // 异常
          normal: 0, // 正常
          tabtotalName: "回路",
          hasPermiValue: "device_manage:plug:list",
        },
        {
          name: "单相电表",
          img: require("@/assets/images/maintenance/tip2.png"),
          total: 0, // 总数
          abnormal: 0, // 异常
          normal: 0, // 正常
          tabtotalName: "回路",
          hasPermiValue: "device_manage:single_phase:list",
        },
        {
          name: "三相电表",
          img: require("@/assets/images/maintenance/tip3.png"),
          total: 0,
          abnormal: 0,
          normal: 0,
          tabtotalName: "回路",
          hasPermiValue: "device_manage:three_phase:list",
        },
        {
          name: "组合电表",
          img: require("@/assets/images/maintenance/tip4.png"),
          total: 0,
          abnormal: 0,
          normal: 0,
          tabtotalName: "回路",
          hasPermiValue: "device_manage:combination:list",
        },
        {
          name: "智能水表",
          img: require("@/assets/images/maintenance/tip5.png"),
          total: 0,
          abnormal: 0,
          normal: 0,
          tabtotalName: "总数",
          hasPermiValue: "device_manage:wmeter:list",
        },
      ],
      pieData1: {
        pieId: "znczId",
        title: "智能插座",
        color: [],
        dataArr: [],
        total: 0,
      },
      pieData2: {
        pieId: "dxdbId",
        title: "单相电表",
        color: [],
        dataArr: [],
        total: 0,
      },
      pieData3: {
        pieId: "sxdbId",
        title: "三项电表",
        color: [],
        dataArr: [],
        total: 0,
      },
      pieData4: {
        pieId: "zhdbId",
        title: "组合电表",
        color: [],
        dataArr: [],
        total: 0,
      },
      pieData5: {
        pieId: "znsbId",
        title: "智能水表",
        color: [],
        dataArr: [],
        total: 0,
      },
      tableData1: {
        column: [
          {
            prop: "deptName",
            label: "用能单位",
            showOverflowTooltip: true,
          },
          {
            prop: "monitoringName",
            label: "能耗终端",
            showOverflowTooltip: true,
          },
          // {
          //   prop: "deviceName",
          //   label: "设备名称",
          //   showOverflowTooltip: true,
          // },
          {
            prop: "deviceCode",
            label: "设备编码",
            width: "150",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "deviceModel",
            width: "120",
            label: "设备型号",
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              return (
                <div>
                  <dict-tag
                    options={this.dict.type.device_model}
                    value={scope.row.deviceModel}
                  />
                </div>
              );
            },
          },
          {
            prop: "ip",
            label: "设备网址IP",
            showOverflowTooltip: true,
          },
          {
            prop: "deviceSwitch",
            label: "继电器状态",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "temperature",
            label: "温度（度）",
            showOverflowTooltip: true,
          },
          {
            prop: "hardVersion",
            label: "组件版本号",
            showOverflowTooltip: true,
          },
          {
            prop: "eventTime",
            label: "最新监测时间",
            width: 180,
            showOverflowTooltip: true,
          },
        ],
        data: [],
      },
      tableData2: {
        column: [
          {
            prop: "deptName",
            label: "用能单位",
            showOverflowTooltip: true,
          },
          {
            prop: "monitoringName",
            label: "能耗终端",
            showOverflowTooltip: true,
          },
          {
            prop: "deviceCode",
            label: "设备编码",
            width: "150",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "deviceModel",
            width: "120",
            label: "设备型号",
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              return (
                <div>
                  <dict-tag
                    options={this.dict.type.device_model}
                    value={scope.row.deviceModel}
                  />
                </div>
              );
            },
          },
          {
            prop: "ip",
            label: "设备网址IP",
            showOverflowTooltip: true,
          },
          {
            prop: "cardNum",
            label: "物联网卡号",
            showOverflowTooltip: true,
          },
          {
            prop: "deviceSwitch",
            label: "状态",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "eventTime",
            label: "最新监测时间",
            width: 180,
            showOverflowTooltip: true,
          },
        ],
        data: [],
      },
      tableData3: {
        column: [
          {
            prop: "deptName",
            label: "用能单位",
            showOverflowTooltip: true,
          },
          {
            prop: "monitoringName",
            label: "能耗终端",
            showOverflowTooltip: true,
          },
          {
            prop: "deviceCode",
            label: "设备编码",
            width: "150",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "deviceModel",
            width: "120",
            label: "设备型号",
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              return (
                <div>
                  <dict-tag
                    options={this.dict.type.device_model}
                    value={scope.row.deviceModel}
                  />
                </div>
              );
            },
          },
          {
            prop: "ip",
            label: "设备网址IP",
            showOverflowTooltip: true,
          },
          {
            prop: "cardNum",
            label: "物联网卡号",
            showOverflowTooltip: true,
          },
          {
            prop: "deviceSwitch",
            label: "状态",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "l1Status",
            label: "L1状态",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "l2Status",
            label: "L2状态",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "l3Status",
            label: "L3状态",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "eventTime",
            label: "最新监测时间",
            width: 180,
            showOverflowTooltip: true,
          },
        ],
        data: [],
      },
      tableData4: {
        column: [
          {
            prop: "deptName",
            label: "用能单位",
            showOverflowTooltip: true,
          },
          {
            prop: "monitoringName",
            label: "能耗终端",
            showOverflowTooltip: true,
          },
          {
            prop: "deviceCode",
            label: "设备编码",
            width: "150",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "deviceModel",
            width: "120",
            label: "设备型号",
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              return (
                <div>
                  <dict-tag
                    options={this.dict.type.device_model}
                    value={scope.row.deviceModel}
                  />
                </div>
              );
            },
          },
          {
            prop: "ip",
            label: "设备网址IP",
            showOverflowTooltip: true,
          },
          {
            prop: "cardNum",
            label: "物联网卡号",
            showOverflowTooltip: true,
          },
          {
            prop: "deviceSwitch",
            label: "状态",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "loopNum",
            label: "回路数量",
            showOverflowTooltip: true,
          },
          {
            prop: "eventTime",
            label: "最新监测时间",
            width: 160,
            showOverflowTooltip: true,
          },
        ],
        data: [],
      },
      tableData5: {
        column: [
          {
            prop: "deptName",
            label: "用能单位",
            showOverflowTooltip: true,
          },
          {
            prop: "monitoringName",
            label: "能耗终端",
            showOverflowTooltip: true,
          },
          {
            prop: "deviceCode",
            label: "设备编码",
            width: "150",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "wmeterDeviceModel",
            width: "120",
            label: "设备型号",
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              return (
                <div>
                  <dict-tag
                    options={this.dict.type.wmeter_device_model}
                    value={scope.row.wmeterDeviceModel}
                  />
                </div>
              );
            },
          },
          {
            prop: "caliber",
            label: "口径",
            showOverflowTooltip: true,
            render: (h, scope) => {
              let a = scope.row.caliber;
              let b = "mm";
              return (
                <div>
                  {a}
                  {b}
                </div>
              );
            },
          },
          {
            prop: "cardNum",
            label: "物联网卡号",
            showOverflowTooltip: true,
          },
          {
            prop: "voltageStatus",
            label: "电池状态",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "signalIntensity",
            label: "信号强度",
            showOverflowTooltip: true,
          },
          {
            prop: "eventTime",
            label: "最新监测时间",
            width: 160,
            showOverflowTooltip: true,
          },
        ],
        data: [],
      },
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
    };
  },
  created() {},
  mounted() {
    this.judgechoseTab();
    this.requesTotaldata();
    this.handlerSearchDetail();
  },
  methods: {
    judgechoseTab() {
      if (auth.hasPermi("device_manage:device:list")) {
        this.choseTab = -1;
        return;
      }
      if (auth.hasPermi("device_manage:plug:list")) {
        this.choseTab = 0;
        return;
      }
      if (auth.hasPermi("device_manage:single_phase:list")) {
        this.choseTab = 1;
        return;
      }
      if (auth.hasPermi("device_manage:three_phase:list")) {
        this.choseTab = 2;
        return;
      }
      if (auth.hasPermi("device_manage:combination:list")) {
        this.choseTab = 3;
        return;
      }
      if (auth.hasPermi("device_manage:wmeter:list")) {
        this.choseTab = 4;
        return;
      }
    },
    minitabChange(value) {
      this.minichoseTab = value;
      // console.log(this.minichoseTab);
    },
    handleGomore(val) {
      console.log(val);
    },
    handleChangetab(index) {
      /* 重置 minichoseTab*/
      this.minichoseTab = "0";
      this.loading = true;
      this.choseTab = index;
      this.resetPageparams();
      this.handlerSearchDetail();
      this.TotaldataDeal();
    },
    resetPageparams() {
      this.currentPage = 1;
      this.pageSize = 20;
      this.total = 0;
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.handlerSearchDetail();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.handlerSearchDetail();
    },
    // 查询统计数据
    requesTotaldata() {
      getDeviceMsg({})
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          // console.log(res, "Totaldata");
          // 图表数据处理
          this.Totaldata = res?.data ?? {};
          this.TotaldataDeal();
          // 计量设备总数
          this.allTotal = res?.data?.deviceTotal ?? 0;
          // 智能插座
          this.tabArr[0].total = res?.data?.plugTotal ?? 0;
          this.tabArr[0].normal = res?.data?.plugNormalNum ?? 0;
          this.tabArr[0].abnormal = res?.data?.plugExceptionNum ?? 0;
          // 单相代表
          this.tabArr[1].total = res?.data?.singlePhaseEmeterTotal ?? 0;
          this.tabArr[1].normal = res?.data?.singlePhaseEmeterNormalNum ?? 0;
          this.tabArr[1].abnormal =
            res?.data?.singlePhaseEmeterExceptionNum ?? 0;
          // 三相电表
          this.tabArr[2].total = res?.data?.threePhaseEmeterTotal ?? 0;
          this.tabArr[2].normal = res?.data?.threePhaseEmeterNormalNum ?? 0;
          this.tabArr[2].abnormal =
            res?.data?.threePhaseEmeterExceptionNum ?? 0;
          // 组合电表
          this.tabArr[3].total = res?.data?.combinationEmeterTotal ?? 0;
          this.tabArr[3].normal = res?.data?.combinationEmeterNormalNum ?? 0;
          this.tabArr[3].abnormal =
            res?.data?.combinationEmeterExceptionNum ?? 0;
          // 智能插座
          this.tabArr[4].total = res?.data?.wmeterTotal ?? 0;
          this.tabArr[4].normal = res?.data?.wmeterNormalNum ?? 0;
          this.tabArr[4].abnormal = res?.data?.wmeterExceptionNum ?? 0;
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!200202");
        });
    },
    TotaldataDeal() {
      switch (this.choseTab) {
        case -1:
          break;
        case 0:
          this.pieData1.total = this.Totaldata?.plugTotal ?? 0;
          this.pieData1.dataArr = [
            { value: this.Totaldata?.plugNormalNum ?? 0, name: "正常" },
            { value: this.Totaldata?.plugExceptionNum ?? 0, name: "异常" },
          ];
          break;
        case 1:
          this.pieData2.total = this.Totaldata?.singlePhaseEmeterTotal ?? 0;
          this.pieData2.dataArr = [
            {
              value: this.Totaldata?.singlePhaseEmeterNormalNum ?? 0,
              name: "正常",
            },
            {
              value: this.Totaldata?.singlePhaseEmeterExceptionNum ?? 0,
              name: "异常",
            },
          ];
          break;
        case 2:
          this.pieData3.total = this.Totaldata?.threePhaseEmeterTotal ?? 0;
          this.pieData3.dataArr = [
            {
              value: this.Totaldata?.threePhaseEmeterNormalNum ?? 0,
              name: "正常",
            },
            {
              value: this.Totaldata?.threePhaseEmeterExceptionNum ?? 0,
              name: "异常",
            },
          ];
          break;
        case 3:
          this.pieData4.total = this.Totaldata?.combinationEmeterTotal ?? 0;
          this.pieData4.dataArr = [
            {
              value: this.Totaldata?.combinationEmeterNormalNum ?? 0,
              name: "正常",
            },
            {
              value: this.Totaldata?.combinationEmeterExceptionNum ?? 0,
              name: "异常",
            },
          ];
          break;
        case 4:
          this.pieData5.total = this.Totaldata?.wmeterTotal ?? 0;
          this.pieData5.dataArr = [
            { value: this.Totaldata?.wmeterNormalNum ?? 0, name: "正常" },
            { value: this.Totaldata?.wmeterExceptionNum ?? 0, name: "异常" },
          ];
          break;
      }
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    // 查询表格数据
    handlerSearchDetail() {
      let that = this;
      let requestway, errCode, requestFlage;
      switch (this.choseTab) {
        case -1:
          requestFlage = false;
          break;
        case 0:
          requestway = getSocketList;
          errCode = "200203";
          requestFlage = true;
          break;
        case 1:
          requestway = getSinglephaseList;
          errCode = "200207";
          requestFlage = true;
          break;
        case 2:
          requestway = getThreepphaseList;
          errCode = "200204";
          requestFlage = true;
          break;
        case 3:
          requestway = getCombinationList;
          errCode = "200205";
          requestFlage = true;
          break;
        case 4:
          requestway = getWmeterList;
          errCode = "200206";
          requestFlage = true;
          break;
      }
      if (requestFlage) {
        let query = {};
        query.pageNum = that.currentPage;
        query.pageSize = that.pageSize;
        that.$store.commit("app/updateApiCount", "add");
        requestway(query)
          .then((res) => {
            that.$store.commit("app/updateApiCount");
            if (res.code === 700) {
              this.$message.warning(res.msg);
              return false;
            }
            // console.log(res, "list");
            let tableDatadata = res?.rows ?? [];
            switch (this.choseTab) {
              case 0:
                that.tableData1.data = tableDatadata;
                break;
              case 1:
                that.tableData2.data = tableDatadata;
                break;
              case 2:
                that.tableData3.data = tableDatadata;
                break;
              case 3:
                that.tableData4.data = tableDatadata;
                break;
              case 4:
                that.tableData5.data = tableDatadata;
                break;
            }
            that.total = res?.total ?? 0;
          })
          .catch((err) => {
            that.$store.commit("app/updateApiCount");
            // this.$message.error("系统错误,请联系管理员!" + errCode);
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
::v-deep .el-table__body-wrapper {
  @include scrollBar2;
}
.sumNum {
  position: absolute;
  font-size: 34px;
  color: #76b4f4;
}
.sumNum1 {
  top: 340px;
  left: 166px;
}
// .table-area {
//   overflow-y: auto;
//   @include scrollBar2;
// }
.content {
  width: 100%;
  display: flex;
  .content-line {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .content-total {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 200px;
      height: 192px;
      justify-content: space-around;
      background: rgba(51, 133, 255, 0.08);
      border-radius: 8px;
      cursor: pointer;
      img {
        width: 104px;
        height: 104px;
      }
      span {
        font-family: PingFangSC-Regular, PingFang SC;
        &:nth-child(2) {
          font-size: 16px;
          font-weight: 400;
          color: rgba(34, 34, 34, 0.85);
          line-height: 28px;
        }
        &:nth-child(3) {
          font-size: 30px;
          font-weight: 500;
          color: #3298f2;
          line-height: 28px;
        }
      }
    }
    .content-total-chose {
      background: rgba(51, 133, 255, 0.5);
    }
    .line-item {
      width: 200px;
      height: 192px;
      background: rgba(51, 133, 255, 0.08);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      cursor: pointer;
      img {
        width: 50px;
        height: 50px;
      }
      .name {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(34, 34, 34, 0.85);
        line-height: 28px;
      }
      .item-bg {
        width: 158px;
        height: 32px;
        background: #ffffff;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        span {
          font-family: PingFangSC-Medium, PingFang SC;
          line-height: 28px;
          &:nth-child(1) {
            font-size: 14px;
            font-weight: 500;
            color: #666666;
            // margin-left: 30px;
          }
          &:nth-child(2) {
            max-width: 53px;
            font-size: 18px;
            font-weight: 500;
            // margin-left: 36px;
            /*1. 先强制一行内显示文本*/
            white-space: nowrap;
            /*2. 超出的部分隐藏*/
            overflow: hidden;
            /*3. 文字用省略号替代超出的部分*/
            text-overflow: ellipsis;
          }
        }
        .total {
          color: #3298f2;
        }
        .abnormal {
          color: #ff2a2a;
        }
      }
    }
    .chose-item {
      background: rgba(51, 133, 255, 0.5);
    }
  }
}
</style>
